<template>
  <div class="new_good">
    <c-title
    :num="num"
    >
      <template v-slot:title> 新品首发 </template>
      <template v-slot:new> NEW~ </template>
    </c-title>
    <div class="box">
      <div class="com">
        <ul>
          <li
          v-for="item in firstList" :key="item.id"
          @click="goDetail(item.id)"
          >
            <a>
                <img v-lazy="item.image" alt="">
                <p class="des">{{item.store_name}}</p>
                <p class="price">{{item.price}}</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import CTitle from "@/components/ctitle/CTitle.vue";
export default {
    data(){
      return{
        num:3,
      }
    },
    props:{
        firstList:{
            type:Array    
        }
    },
  components: {
    CTitle,
  },
  methods:{
    goDetail(id) {
      this.$router.push("/detail/" + id);
    },
  }
};
</script>

<style lang="scss" scoped>
.new_good{
    background-color: #fff;
}
.box{
    padding: 15px 15px 0;
    .com::-webkit-scrollbar{
        display: none;
    }
    .com{
        width: 100%;
        overflow-x:auto;
        padding-bottom: 22px;
        border-bottom: 1px solid #eee;

        ul{
            display: flex;
            li{
                // width: 120px;
                margin-left: 8px;
                flex-grow:0;
                border: 1px solid #eee;
                a{
                    display: block;
                    width: 120px;
                    >img{
                        display: block;
                        width: 100%;
                        height: 120px;
                        border-radius: 8px;
                    }
                    .des{
                        width: 100px;
                        font-size: 14px;
                        color: #333;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        margin: 8px auto 0;
                    }
                    .price{
                        text-align: center;
                        font-size: 13px;
                        color: #fc4141;
                        margin: 2px auto 15px;
                    }
                }
            }
        }
    }
}
</style>

